<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-i18n/1.6.0-rc.1/angular-locale_zh-cn.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
     
        .back{
            /*font-family:Arial, Helvetica, sans-serif; */
            background-color:#56CE19
        }   
        #selectUl{
            border: 1px solid #CCC;
            border-radius: 5px;
            width: 200px;;
        }
        #selectUl ul {
           list-style:none;margin-left: -40px;
        }
        #selectUl ul li{
            display:inline-block; width:198px; height:30px;
        }
         #selectUl ul li:hover{
           background:#F7F7F7;
        }
        .downLi{
            background:#5BC0DE; 
        }
    </style>
    <script>
       var app = angular.module('bootApp',['ui.bootstrap']);
       //已指令的形式加载time控件
       app.directive('datepickerPopup',function ($filter){
           return {
               restrict:'AE',
               //templateUrl:'./tmp/datepicker.html',
               template:angular.element(document.querySelector("#timeDiv")).html(),
               scope: true,
               controller:function ($scope,$element,$compile,$http,$attrs,$log,$filter){
                   var vm = $scope.$parent.vm;
				   //设置组件参数
                    $scope.dat = new Date();
                    $scope.format = $attrs.formt;
                    $scope.altInputFormats = ['yyyy/M!/d!'];
                    $scope.popup1 = {opened: false};
                    $scope.open1 = function (){
                        $scope.popup1.opened = true;
                    };
				   console.log("controller---");
               },
              link:function (scope,element,attr){
                     element.bind('click',function(){//根据项目的主题分格 颜色保持一致即可！ 这里随便改了个颜色。默认应该是白色的！这里是黑科技修改，实际应用应该是修改源码CSS
                            element.find("ul").addClass('back');
                            var formatDate = $filter('date')(scope.dat, 'yyyy-MM-dd HH:mm:ss');
                            console.log('捕捉到点击事件值是：'+formatDate);
                        });
               }
           }
       });
     //自定义指令实现下拉菜单
       app.directive('selectPopup',function ($filter,$compile){
           return {
               restrict:'AE',
               //templateUrl:'./tmp/datepicker.html',
               template:angular.element(document.querySelector("#selectDiv")).html(),
               scope: true,
               controller:function ($scope,$element,$http,$attrs,$log){
                    
               },
               link:function (scope,element,attr){
                           var names = ['a','b','c','d','e','f','abc','ade','ef','adf','aer','acv','aaa','ab','ae','ag'];
                           var flag = 0;
                           element.bind("keyup",function (ev){
                               var li = angular.element(document.querySelectorAll("#selectUl ul li"));
                               if(event.keyCode != 40 && event.keyCode !=38 && event.keyCode !=13){
                                    var userName = scope.userName;
                                    scope.tmp = $filter('filter')(names,userName);   
                                    console.log(scope.tmp);  
                                    angular.element(document.querySelectorAll("#selectUl")).remove();
                                    if(''!=scope.userName){
                                        var html1 = '<div id="selectUl"><ul>';
                                        var html2 = '';
                                        angular.forEach(scope.tmp,function (n,i){
                                            html2 = ('<li class="list-group-item" ng-click="sel($event);">'+n+'</li>') + html2;
                                        })
                                        var html3 = '</ul></div>';
                                        var tpl = $compile(html1+html2+html3)(scope);//再次编译   为动态的事件绑定
                                        element.append(tpl);
                                    }
                               }else if(event.keyCode == 40){//键盘下 方向键控制下拉数据下移
                                   if(flag<li.length){
                                        angular.forEach(li,function(n,i){
                                             if(angular.element(n).attr('active')=='true'){
                                                angular.element(n).removeAttr('active').removeClass('downLi');
                                            }
                                        })
                                        if(li.eq(flag).attr('last')=='true'){//如果按到第二圈了 那么eq 元素第一个跳过，进行下一个li的着色
                                            flag++;
                                        }
                                        li.eq(flag).attr('active','true').addClass('downLi');//li标记active 并着色
                                        flag++;
                                   }else{
                                       angular.element(li).eq(li.length-1).removeAttr('active').removeClass('downLi');
                                       angular.element(li).eq(0).attr('active','true').attr('last','true').addClass('downLi');//标记第二圈开始
                                       flag = 0;
                                   }
                                   
                               }else if(event.keyCode == 38){//键盘上   方向键控制下拉数据上移。。。 没有写完  太繁琐了麻痹写完估计会疯掉  啊哈哈哈 老铁们有空了可以接着写！

                               }else if(event.keyCode == 13){//回车键事件 选中值 清空下拉框
                                  angular.forEach(li,function(n,i){
                                      scope.$apply(function (){//及时更新值！
                                           if(angular.element(n).attr('active')=='true'){
                                          //赋值给Input
                                          var enterVal = angular.element(n).html();
                                          scope.userName = enterVal;
                                          //清空下拉框div
                                          angular.element(document.querySelectorAll("#selectUl")).remove();
                                         
                                      }

                                      })  
                                  })
                                  //scope.$apply();  
                               }
							  
                                console.log(flag);
                           });
                           //点击li事件
                           scope.sel = function (ev){
                               //改变input的值
                               var val = angular.element(ev.target).html();
                               scope.userName = val;
                               //清空下拉框div
                               angular.element(document.querySelectorAll("#selectUl")).remove();
                           };
                         element.bind("click",function (ev){
                                   console.log('捕获到模版文件的-点击事件当前的值是----'+angular.element(ev.target).val());
                         });
                }
           }
       });



    
    </script>

</head>

<body ng-app="bootApp">

 <hr/>bootstarp+angular 时间控件
<datepicker-popup formt='yyyy/MM/dd HH:mm:ss'></datepicker-popup>


  <hr/>下拉框控件支持自动筛选数据  比如输入a将可以看到筛选效果 支持鼠标选择下拉数据 以及方向键控住选择数据
<select-popup></select-popup>

<div style="margin-top:400px;text-align: center;background-color: #9E9E8B;">作者QQ:717543275  小白一枚 纯手写 凭感觉 很多地方有待优化  不喜勿喷 啊哈哈</div>




  <!--模版文件time HTML-->
  <div id="timeDiv" style="display:none;">
         <p class="form-group">
             <div class="input-group">
                <input type="text" class="form-control" 
				uib-datepicker-popup="{{format}}" 
                ng-model="dat" 
				is-open="popup1.opened" 
				ng-required="true" 
				close-text="关闭"
                clear-text="清空" 
				current-text="今天"
				datepicker-append-to-body=false
				datepicker-options ={'yearRows':4,'yearColumns':5}
				alt-input-formats="altInputFormats"/>
               <button type="button" class="btn btn-info" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>{{dat | date:'yyyy-MM-dd HH:mm:ss'}}
             </div>
         </p>
  </div>

  <!--模板文件input  HTMl-->
    <div id="selectDiv" style="display:none;margin-left:400px">
        <input class="form-control" id="userName" type="text" ng-model="userName" style="width:200px;"/>{{flag}}
    </div>




</body>
</html>
